<!--second-input-box  组件输入展示框-->
<template>
  <div class="second-input-box" :class="{'border-width100':borderLength}">
      <span class="name">{{name}}</span>
      <p class="content">{{content}}</p>
  </div>
</template>

<script>
export default {
  name: '',

  data () {
    return {
    }
  },
  props: {
    'name': {default: ''},
    'content': {default: ''},
    'borderLength': {
      default: () => {
        return true
      }
      }
  },
  components: {},

  computed: {},

  methods: {},

  mounted () {}
}
</script>
<style lang="stylus" scoped>
$rem = 2.5
.second-input-box
  position relative
  display flex
  justify-content flex-start
  align-items center 
  padding  0.5rem * $rem  0.18rem * $rem 0.5rem * $rem 0.22rem * $rem
  &:after
    content ""
    position absolute
    bottom 0
    left 0
    right 0
    margin 0 auto
    width calc(100% - 1rem)
    height 0.02rem * $rem
    background-color #dddddd
  &.border-width100:after
    width 100%
  .name
    color #1a1e24
    font-weight bold
    padding-right 0.1rem * $rem
    font-size 0.3rem * $rem
  .content
    color #333333
    flex 1 1 auto
    height 0.6rem * $rem
    line-height 0.6rem * $rem
    text-align right
    font-size 0.27rem * $rem
</style>
